<template>
  <div class="version-management">
    <el-row>
      <!-- 添加弹出框 -->
      <el-dialog :title="typeStatus==1?'新增版本':'修改版本'"
                 :close-on-click-modal="false"
                 :before-close="handleCloseAdd"
                 :visible.sync="dialogFormAdd">
        <AddModifyVersion :todos="todos"
                          :clientType="clientType"
                          :dialogForm="dialogForm"
                          :catchModifySave="catchModifySave"
                          :catchModifyBack="catchModifyBack">
        </AddModifyVersion>
      </el-dialog>

      <el-col :span="24">
        <el-col :span="5">
          <el-col :span="10"
                  class="col-10-style">
            <el-button type="primary"
                       @click="onAdd()">添加App</el-button>
          </el-col>
          <el-col :span="4">&nbsp;</el-col>
        </el-col>
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="12">
          <el-col :span="24"
                  class="col-span-style">
            <el-form :inline="true"
                     :model="form"
                     class="float-right">
              <el-form-item>
                <el-input v-model="form.ver"
                          placeholder="请输入版本号"></el-input>
              </el-form-item>
              <el-button type="primary"
                         @click="onSearch">查询</el-button>
            </el-form>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24">
        <div class="el-table__body-wrapper is-scrolling-none">
          <el-table :data="tableData"
                    border
                    :header-cell-style="{background:'#f5f5f5'}"
                    class="system-instyle">
            <el-table-column label="序号"
                             align="center"
                             type="index"
                             width="60px"></el-table-column>
            <el-table-column prop="ver"
                             label="版本号"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="ver_content"
                             label="更新说明"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="system_type"
                             label="客户端"
                             align="center"
                             :formatter="handleSystemTypeFilter"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="url"
                             label="下载地址"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="ver_date"
                             label="发布新时间"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="is_force"
                             label="更新方式"
                             align="center"
                             :formatter="handleForceFilter"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作"
                             width="185px"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                           @click="onEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="text"
                           @click="onDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24"
              class="footer-modi-pagination">
        <el-pagination id="pagination"
                       @current-change="handleCurrentChange"
                       :current-page="requestParam.page"
                       :page-size="pagesize"
                       :page-sizes="[10]"
                       background
                       layout="total,  sizes,prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { versionManagementApi } from "@/services/SystemSetting";
import { standardCodeApi } from "@/services/StandardCode";
import AddModifyVersion from "./components/addModifyVersion";
export default {
  components: {
    AddModifyVersion
  },
  data () {
    return {
      typeStatus: "",
      todos: 0,
      formAdd: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      dialogFormAdd: false,
      options: [],
      tableData: [],
      form: {
        pro_type: "1",
        ver: ""
      },
      page: "",
      total: 0,
      pagesize: 10, // 每页的条数限制
      currentPage: 0,
      requestParam: {
        ver: "",
        system_type: "1",
        is_page: 1,
        page: 1,
        page_size: 10
      },
      dialogForm: {},
      updateArr: [],
      clientType: 0,
    };
  },
  methods: {
    // 查询
    onSearch () {
      this.requestParam.ver = this.form.ver;
      this.requestParam.system_type = this.form.pro_type;
      this.requestParam.page = 1;
      this.getVersionManaData();
    },
    handleCloseAdd (done) {
      this.dialogForm = {};
      this.todos = 0;
      this.dialogFormAdd = false;
    },
    // 父组件获取子组件的传值--新增
    // catchSave (value) {
    //   if (value == "SUCCESS") {
    //     // 关闭新增弹出框
    //     this.dialogFormAdd = false;
    //     this.onSearch();
    //     // this.onSearchInf();
    //   }
    // },
    // // 父组件获取子组件的传值-新增
    // catchBack (value) {
    //   if (value == "0") {
    //     this.dialogFormAdd = false;
    //   }
    // },
    // 父组件获取子组件的传值-修改
    catchModifySave (value) {
      if (value == "0") {
        this.dialogForm = {};
        this.clientType = 0;
        this.todos = 0;
        // 关闭新增弹出框
        this.dialogFormAdd = false;
        this.onSearch();
      }
    },
    // 父组件获取子组件的传值-修改
    catchModifyBack (value) {
      if (value == "0") {
        this.dialogForm = {};
        this.clientType = 0;
        this.todos = 0;
        this.dialogFormAdd = false;
        this.getVersionManaData();
      }
    },
    // 删除事件
    onDelete (row) {
      this.$confirm('此操作将永久删除"' + row.ver + '"版本,是否继续?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          versionManagementApi
            .onDelete({
              data: {
                sys_ver_id: row.sys_ver_id
              }
            })
            .then(res => {
              this.$message.success("操作成功!");
              this.onSearch();
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    // 跳转到客户端页面
    onClient () {
      this.$router.push("/addClient");
    },
    // 跳转到新增页面
    onAdd () {
      this.dialogForm = {};
      this.todos = 1;
      this.typeStatus = 1;
      this.clientType = 1;
      this.dialogFormAdd = true;
    },
    // 编辑事件
    onEdit (row) {
      this.todos = 1;
      this.typeStatus = 2;
      this.clientType = Number(row.system_type);
      this.dialogForm = row;
      this.dialogFormAdd = true;
    },
    // 获取版本管理数据
    getVersionManaData () {
      versionManagementApi
        .getVersionManaData({
          data: this.requestParam
        })
        .then(res => {
          this.tableData = res.data.list;
          this.total = res.data.total_count;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 数据列表分页
    handleCurrentChange (page) {
      this.requestParam.page = page;
      this.getVersionManaData();
    },
    // 版本管理页面->获取代码值下拉
    getSelectData () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: ""
          }
        })
        .then(res => { })
        .catch(error => {
          console.log(error);
        });
    },
    //获取客户端类型标准码
    getClientTypeData () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "clientType"
          }
        })
        .then(res => {
          this.options = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更新方式标准码
    getUpdateTypeData () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "updateType"
          }
        })
        .then(res => {
          this.updateArr = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //过滤客户端类型
    handleSystemTypeFilter (row) {
      var sysType;
      this.options.filter(item => {
        if (item.value == row.system_type) {
          sysType = item.name;
        }
      });
      return sysType;
    },
    //过滤更新方式数据
    handleForceFilter (row) {
      var force;
      this.updateArr.filter(item => {
        if (item.value == row.is_force) {
          force = item.name;
        }
      });
      return force;
    }
  },
  created () {
    // 版本管理页面->获取代码值下拉
    // this.getSelectData()
    // 获取版本下拉数据
    this.getVersionManaData();
    this.getClientTypeData();
    this.getUpdateTypeData()
  }
};
</script>
<style lang="scss" scoped>
#headPort {
  margin-right: 10%;
}
#headAdd {
  width: 100% !important;
}
.col-10-style {
  padding-right: 12px;
}
.col-span-style {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.select-style {
  width: 100% !important;
}
// /deep/ #pagination .el-pager .active:hover {
//   color: #fff;
// }
// /deep/ #pagination .el-pager li:hover {
//   color: #1abc9c;
// }
// /deep/ .opeate_btn {
//   padding: 8px 20px;
// }
.version-management {
  padding: 20px;
  // /deep/ .current-row > td {
  //   background: #1890ff !important;
  //   color: white;
  // }
  // /deep/ .el-table__body tr.current-row > td .el-button {
  //   color: #fff;
  // }
  .footer-modi-pagination {
    text-align: center;
    margin-top: 20px;
  }
  // /deep/ #pagination .el-pager .active {
  //   background: #1abc9c;
  //   color: white;
  // }
}
</style>
